<script lang="ts" setup>
import { SwapOutlined } from '@vicons/antd'
import { getTaskStatusClass, useFlowStore } from '../../flowStore'
import Card from '../component/card/index.vue'
import OperateBtn from '../component/operate-btn/index.vue'

import ApproverComponent from '../approver-component/index.vue'
import ConditionComponent from '../condition-component/index.vue'
import EndComponent from '../end-component/index.vue'
import ParallelComponent from '../parallel-component/index.vue'
import TriggerComponent from '../trigger-component/index.vue'

const props = defineProps(["node"])
const flowStore = useFlowStore()
</script>
<template>
    <div>
        <div class="flow-branch-node">
            <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), 'flow-node-btn branch-btn']"
                @click="flowStore.addNode(props.node.nodeId, '5')">
                {{ ["0"].includes(flowStore.mode) ? "添加并行" : "并行节点" }}
            </div>
            <div v-for="(branch, branchIndex) in props.node?.branchNodeList" :key="branch.nodeId"
                class="flow-branch-node-item-wrapper">
                <div
                    :class="['flow-branch-node-item', { 'left': branchIndex === 0 }, { 'right': branchIndex === props.node?.branchNodeList.length - 1 }]">
                    <div class="flow-node">
                        <card :node="branch">
                            <template #icon>
                                <swap-outlined />
                            </template>
                            并行任务（同时执行）
                        </card>
                        <div class="flow-operate">
                            <operate-btn :node="branch" />
                        </div>
                    </div>

                    <div v-for="branchChild in branch.children" :key="branchChild.nodeId" class="flow-node-container">

                        <approver-component v-if="branchChild.nodeType === '1'" :node="branchChild" />

                        <condition-component v-if="branchChild.nodeType === '2'" :node="branchChild" />

                        <parallel-component v-if="branchChild.nodeType === '4'" :node="branchChild" />

                        <trigger-component v-if="branchChild.nodeType === '6'" :node="branchChild" />

                        <end-component v-if="branchChild.nodeType === '9'" :node="branchChild" />
                    </div>
                </div>
            </div>

            <div :class="[getTaskStatusClass(flowStore.mode, node.taskStatus), 'flow-node-btn end']"
                @click="node.isEdit = true">
                并行结束
            </div>
            <div class="flow-branch-operate">
                <operate-btn :node="props.node" />
            </div>
        </div>

        <div v-for="child in props.node.children" :key="child.nodeId" class="flow-node-container">

            <approver-component v-if="child.nodeType === '1'" :node="child" />

            <condition-component v-if="child.nodeType === '2'" :node="child" />

            <parallel-component v-if="child.nodeType === '4'" :node="child" />

            <trigger-component v-if="child.nodeType === '6'" :node="child" />

            <end-component v-if="child.nodeType === '9'" :node="child" />
        </div>
    </div>
</template>
<style scoped></style>